<template>
    <div class="bpmn-panel">
        <el-container>
            <el-header height="45px">
                <div class="config-tab" :class="{active: configTab=='node'}" @click="handleConfigSelect('node')">
                    Item属性
                </div>
                <div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">表单属性
                </div>
            </el-header>
            <el-main>
                <item-properties-panel v-show="configTab=='node'" :item-name="itemName" @updateFieldData="updateFieldData"/>
                <form-property-panel v-show="configTab=='form'" @updateFormData="updateFormData"
                                     :datas="datas" :form-action="formAction"/>
            </el-main>
        </el-container>

    </div>
</template>

<script>
    import ItemPropertiesPanel from "./ItemPropertiesPanel";
    import FormPropertyPanel from "./FormPropertyPanel";
    export default {
        name: "PropertyPanel",
        data() {
            return {
                configTab: this.tabName,
                panelIndex: 1,
                element: null,
                nodeElement: {},
                formData: {}
            }
        },
        props: {
            tabName: {
                type: Object,
                required: true
            },
            formAction: {
                type: Object,
                required: true
            },
            datas: {
                type: Object,
                required: true
            },
            itemName: {
                type: Object,
                required: true
            }
        },
        mounted() {
            this.handleModeler();
        },
        watch: {
            tabName(v) {
                this.configTab = this.tabName;
            }
        },
        methods: {
            updateFieldData(data) {
                this.$emit("updateFieldData", data);
            },
            updateFormData(data) {
                this.$emit("updateFormData", data);
            },
            handleConfigSelect(value) {
                this.configTab = value;
                this.$emit("updateTabname", value);
            },
            handleModeler() {
                const _this = this;
                if (true) {
                    this.modifyConfigTab(0)
                } else {
                    this.modifyConfigTab(1)

                }

            },

            modifyConfigTab(element) {
                let configTab = 'node'
                if (!element) {
                    configTab = 'form'

                }
                this.configTab = configTab
            }

        },
        components: {
            ItemPropertiesPanel,
            FormPropertyPanel
        }
    }
</script>

<style scoped>
    .bpmn-panel {
        width: 350px;
        border: 1px solid #eeeeee;
        padding: 0 5px;
    }

    .el-header {
        border-bottom: solid 2px #e4e7ed;
        padding: 0;
    }

    .config-tab {
        height: 43px;
        line-height: 43px;
        display: inline-block;
        width: 50%;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        position: relative;
        cursor: pointer;
    }

    .config-tab.active {
        border-bottom: solid 2px #409EFF;
    }

    .bpmn-panel {
        width: 370px;
        border: 1px solid #eeeeee;
        padding: 0 5px;
    }

    .el-select--small {
        width: 100%;
    }

    .el-dialog > .el-dialog__header {
        padding: 5px 20px;
    }

    .el-dialog > .el-dialog__body {
        padding: 0px;
        margin: 0 20px;
        border: 1px solid #cccccc;
    }

    .default-undo {
        color: #c0c4cc;
    }
</style>
